<?php

/* @var $this \yii\web\View */

use yii\helpers\Url;

?>
<?= $this->render('permission') ?>
<script type="text/x-template" id="left-drawer-template">
    <v-navigation-drawer
            v-model="leftDrawerVisible"
            app
            :temporary="temporary"
    >
        <v-list-item style="background: url(<?=Url::to('@admin/images/user-background.jpg')?>);height: 160px;" dark>
            <v-list-item-avatar>
                <v-img :src="localUserPic"></v-img>
            </v-list-item-avatar>

            <v-list-item-content>
                <v-list-item-title>{{ admin?admin.username:''}}</v-list-item-title>
                <v-list-item-subtitle>{{ admin?admin.type_label:''}}</v-list-item-subtitle>
            </v-list-item-content>

            <v-list-item-action>

                <v-menu offset-y>
                    <template v-slot:activator="{ on, attrs }">
                        <v-btn
                                v-bind="attrs"
                                v-on="on"
                                text
                        >
                            <v-icon>
                                fa-caret-down
                            </v-icon>
                        </v-btn>
                    </template>
                    <v-list>
                        <v-list-item>
                            <v-btn color="primary" text @click="$logout">
                                <v-icon color="primary" left>
                                    fa-sign-out-alt
                                </v-icon>
                                退出
                            </v-btn>
                        </v-list-item>
                    </v-list>
                </v-menu>
            </v-list-item-action>
        </v-list-item>

        <v-divider></v-divider>

        <v-list dense>
            <div v-for="link in links" :key="link.title">
                <v-list-item
                        v-if="link.children.length == 0"
                        link
                        :href="link.url"
                >
                    <v-list-item-icon>
                        <v-icon>{{ link.icon }}</v-icon>
                    </v-list-item-icon>

                    <v-list-item-content>
                        <v-list-item-title>{{ $lang(link.title) }}</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>

                <v-list-group
                        v-if="link.children.length > 0"
                        :value="false"
                        :prepend-icon="link.icon"
                        :href="link.url"

                >
                    <template v-slot:activator>
                        <v-list-item-title>{{ $lang(link.title) }}</v-list-item-title>
                    </template>

                    <v-list-item
                            v-for="child in link.children"
                            :key="child.title"
                            link
                            :href="child.url"
                    >
                        <v-list-item-icon>
                        </v-list-item-icon>
                        <v-list-item-content>
                            <v-list-item-title>{{ $lang(child.title) }}</v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>

                </v-list-group>
            </div>
            <v-snackbar
                    v-model="orderSnackOpen"
                    app
            >
                {{ orderSnackbarText }}

                <template v-slot:action="{ attrs }">
                    <v-btn
                            color="blue"
                            text
                            v-bind="attrs"
                            @click="orderSnackOpen = false"
                    >
                        Close
                    </v-btn>
                </template>
            </v-snackbar>

        </v-list>


    </v-navigation-drawer>
</script>
<script>
    // 定义一个名为 share-dialog 的新组件
    Vue.component('left-drawer', {
        data: function () {
            return {
                leftDrawerVisible: null,
                links: [
                    {
                        title: '主页',
                        icon: 'mdi-home',
                        url: "<?=Url::to(['index/index'])?>",
                        children: [],
                    },
                    {
                        title: '商城管理',
                        icon: 'mdi-chess-bishop',
                        url: null,
                        children: [
                            {
                                title: '<?=Yii::t('app','Products')?>',
                                url: "<?=Url::to(['product/index'])?>",
                            },
                            {
                                title: '<?=Yii::t('app','Classifies')?>',
                                url: "<?=Url::to(['classify/index'])?>",
                            },
                            {
                                title: '<?=Yii::t('app','Attr Names')?>',
                                url: "<?=Url::to(['attr-name/index'])?>",
                            },
                        ],
                    },
                    {
                        title: '人员管理',
                        icon: 'fa-user',
                        url: null,
                        visible: true,
                        children: [
                            {
                                title: '用户管理',
                                url: "<?=Url::to(['user/index'])?>",
                                visible: true,
                            },
                        ],
                    },
                ],
                orderSnackOpen: false,
                orderSnackbarText: '',
            };
        },
        computed: {
            theme: function () {
                let theme = this.$vuetify.theme;
                return theme.isDark ? theme.themes.dark : theme.themes.light;
            },
            localUserPic() {
                let user = this.$local_load_user();
                return user.head_pic_url;
            },
            admin: function () {
                return this.$local_load_user();
            },
            temporary: function () {
                switch (this.$vuetify.breakpoint.name) {
                    case 'xs':
                        return true
                    case 'sm':
                        return true
                    case 'md':
                        return false
                    case 'lg':
                        return false
                    case 'xl':
                        return false
                }
            }
        },
        methods: {
            toggleLeftDrawerVisible() {
                this.leftDrawerVisible = !this.leftDrawerVisible;
            },
        },
        template: '#left-drawer-template'
    })
</script>
